<template>
  <div class="pub">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <van-cell title="房源信息" />

    <van-cell border title="小区名称" @click="$router.push('/rentsearch')">
      <span>{{
        communityInfo.communityName
          ? communityInfo.communityName
          : "请输入小区名称"
      }}</span>
      <van-icon name="arrow" />
    </van-cell>
    <van-field>
      <template #input>
        <input
          type="text"
          placeholder="请输入租金/月"
          class="slot-input"
          v-model="rentHouseInfo.price"
        />
      </template>
      <template #label>
        <span> 租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金 </span>
      </template>
      <template #right-icon>
        <span>￥/月</span>
      </template>
    </van-field>
    <van-field label="建筑面积">
      <template #input>
        <input
          type="text"
          placeholder="请输入建筑面积"
          class="slot-input"
          v-model="rentHouseInfo.size"
        />
      </template>
      <template #right-icon>
        <span>㎡</span>
      </template>
    </van-field>
    <!-- 户型选择 -->
    <van-field
      readonly
      clickable
      class="picker"
      right-icon="arrow"
      placeholder="请选择"
      @click="showType = true"
      v-model="roomType"
    >
      <template #label>
        <span> 户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型 </span>
      </template>
    </van-field>
    <van-popup position="bottom" v-model="showType">
      <van-picker
        show-toolbar
        @cancel="showType = false"
        @confirm="getRoomType"
        value-key="label"
        :columns="roomTypeList"
        ref="roomType"
      />
    </van-popup>

    <!-- 楼层 -->
    <van-field
      readonly
      clickable
      class="picker"
      label="所在楼层"
      right-icon="arrow"
      placeholder="请选择"
      @click="showFloor = true"
      v-model="floor"
    />
    <van-popup position="bottom" v-model="showFloor">
      <van-picker
        show-toolbar
        @cancel="showFloor = false"
        @confirm="getFloor"
        value-key="label"
        :columns="floorList"
        ref="floor"
      />
    </van-popup>

    <!-- 朝向 -->
    <van-field
      readonly
      clickable
      class="picker"
      right-icon="arrow"
      placeholder="请选择"
      @click="showOriented = true"
      v-model="oriented"
    >
      <template #label>
        <span> 朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向 </span>
      </template>
    </van-field>
    <van-popup position="bottom" v-model="showOriented">
      <van-picker
        show-toolbar
        value-key="label"
        @cancel="showOriented = false"
        @confirm="getOriented"
        :columns="orientedList"
        ref="oriented"
      />
    </van-popup>

    <van-cell border title="房屋标题">
      <template #label>
        <van-field
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入标题(例如：整租 小区名 2室 5000元)"
          v-model="rentHouseInfo.title"
        />
      </template>
    </van-cell>

    <van-cell border title="房屋图像">
      <template #label>
        <van-uploader
          upload-icon="plus"
          v-model="fileList"
          :after-read="afterRead"
          multiple
        />
      </template>
    </van-cell>

    <!-- 房屋配置 -->
    <van-cell border title="房屋配置" class="houseconfig"> </van-cell>
    <div class="HouseDetail_about">
      <van-grid :border="false" :column-num="5">
        <van-grid-item
          v-for="(item, index) in house_package"
          :key="item.id"
          :text="item.name"
          :class="{ 'selected-config': item.isSelected }"
          @click="selected(index)"
        >
          <template #icon><span :class="`iconfont ${item.icon}`" /> </template>
        </van-grid-item>
      </van-grid>
    </div>

    <van-cell border title="房屋描述">
      <template #label>
        <van-field
          class="info"
          rows="4"
          autosize
          type="textarea"
          placeholder="请输入房屋描述信息"
        />
      </template>
    </van-cell>
    <div class="btn">
      <van-button>取消</van-button
      ><van-button type="primary" @click="sendRent">确定</van-button>
    </div>
  </div>
</template>

<script>
import { getRentParamsApi, postRentHouseImgApi, postRentHouseApi } from "@/api";
export default {
  name: "Rent",
  data() {
    return {
      showType: false, // 户型
      showFloor: false, // 楼层
      showOriented: false, // 朝向

      house_package: [
        {
          id: 1,
          name: "衣柜",
          icon: "icon-yigui",
          isSelected: false,
        },
        {
          id: 2,
          name: "洗衣机",
          icon: "icon-xiyiji",
          isSelected: false,
        },
        {
          id: 3,
          name: "空调",
          icon: "icon-kongtiao",
          isSelected: false,
        },
        {
          id: 4,
          name: "天然气",
          icon: "icon-tianranqi",
          isSelected: false,
        },
        {
          id: 5,
          name: "冰箱",
          icon: "icon-bingxiang",
          isSelected: false,
        },
        {
          id: 6,
          name: "暖气",
          icon: "icon-nuanqi",
          isSelected: false,
        },
        {
          id: 7,
          name: "电视",
          icon: "icon-lcd",
          isSelected: false,
        },
        {
          id: 8,
          name: "热水器",
          icon: "icon-reshuiqi",
          isSelected: false,
        },
        {
          id: 9,
          name: "宽带",
          icon: "icon-kuandai",
          isSelected: false,
        },
        {
          id: 10,
          name: "沙发",
          icon: "icon-sofa",
          isSelected: false,
        },
      ],
      roomTypeList: [],
      roomType: "",
      floorList: [],
      floor: "",
      orientedList: [],
      oriented: "",
      fileList: [],
      communityInfo: this.$route.params,
      houseImg: [], // 图片文件
      rentHouseInfo: {
        title: "",
        houseImg: "",
        oriented: "", //
        supporting: [],
        price: "",
        roomType: "", //
        size: "",
        floor: "", //
        community: "", //
      },
    };
  },

  methods: {
    afterRead(file) {
      this.houseImg.push(file);
      console.log(this.houseImg);
    },
    getRoomType() {
      const index = this.$refs.roomType.getIndexes();
      this.roomType = this.roomTypeList[index].label;
      this.rentHouseInfo.roomType = this.roomTypeList[index].value;
      this.showType = false;
    },
    getFloor() {
      const index = this.$refs.floor.getIndexes();
      this.floor = this.floorList[index].label;
      this.rentHouseInfo.floor = this.floorList[index].value;
      this.showFloor = false;
    },
    getOriented() {
      const index = this.$refs.oriented.getIndexes();
      this.oriented = this.orientedList[index].label;
      this.rentHouseInfo.oriented = this.orientedList[index].value;
      this.showOriented = false;
    },
    selected(index) {
      this.house_package[index].isSelected =
        !this.house_package[index].isSelected;
      this.rentHouseInfo.supporting = this.house_package.reduce(
        (subArr, curr) => {
          if (curr.isSelected) {
            subArr.push(curr.name);
          }
          return subArr;
        },
        []
      );
    },
    async sendRent() {
      const fm = new FormData();
      let houseImages = "";
      if (this.houseImg.length === 0) {
        return this.$toast.fail("房屋图片不能为空！");
      }
      // 图片上传
      this.houseImg.forEach((item) => fm.append("file", item.file));
      this.$toast.loading({
        message: "正在上传图片",
        forbidClick: true,
      });
      try {
        const { data } = await postRentHouseImgApi(fm);
        houseImages = data.body.join("|");
        this.rentHouseInfo.houseImg = houseImages;
        this.$toast.success("图片上传成功");
      } catch (error) {
        this.$toast.fail("图片上传失败，请刷新后重试");
      }

      //房屋发布
      this.rentHouseInfo.supporting = this.rentHouseInfo.supporting.join("|");
      this.$toast.loading({
        message: "正在发布",
        forbidClick: true,
      });
      try {
        await postRentHouseApi(this.rentHouseInfo);
        this.$dialog
          .confirm({
            title: "大工地产",
            message: "房屋发布成功",
            confirmButtonText: "去查看",
            cancelButtonText: "继续发布",
          })
          .then(() => {
            // 去查看
            this.$router.push("/myhouse");
          })
          .catch(() => {
            // 继续发布
            this.houseImg = [];
            this.rentHouseInfo.supporting = [];
            this.rentHouseInfo.title = "";
            this.rentHouseInfo.houseImg = "";
            this.rentHouseInfo.price = "";
            this.rentHouseInfo.size = "";
          });
      } catch (error) {
        this.$toast.fail("房屋发布失败，请刷新后重试");
      }
    },
  },
  async created() {
    const { data } = await getRentParamsApi();
    console.log(data);
    this.roomTypeList = data.body.roomType;
    this.floorList = data.body.floor;
    this.orientedList = data.body.oriented;
  },
  mounted() {
    this.rentHouseInfo.community = this.$route.params.community;
  },
};
</script>

<style lang="less" scoped>
body {
  background-color: #eee;
}
:deep(.van-nav-bar) {
  background-color: #21b97a;
  .van-icon-arrow-left {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
:deep(.van-field__label) {
  text-align: justify;
  width: 40px;
}

:deep(.van-cell__title) {
  span {
    display: inline-block;
    text-align: justify;
    width: 80px;
  }
}
:deep(.van-grid-item) {
  i {
    font-size: 50px;
    color: #333;
  }
  p {
    margin-top: 15px;
    font-size: 25px;
    color: #333;
  }
}
.info {
  margin-bottom: 130px;
}

.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  :deep(.van-button) {
    width: 50%;
  }
}
.pub {
  .picker {
    :deep(.van-field__control) {
      text-align: right;
    }
  }
  .slot-input {
    margin-left: 25px;
    border: none;
  }
}
:deep(.houseconfig) {
  .van-grid-item {
    .van-grid-item__content {
      line-height: 23px;
      .iconfont {
        font-size: 20px;
      }
      p {
        padding: 0;
        margin: 0;
        font-size: 14px;
      }
    }
  }
}
.HouseDetail_about {
  width: 100%;
  height: 145px;
}
.HouseDetail_about {
  .iconfont {
    font-size: 23px;
  }
  :deep(.van-grid-item__text) {
    font-size: 14px;
  }
  .selected-config {
    color: #21b97a;
    :deep(.van-grid-item__text) {
      color: #21b97a;
    }
  }
}
</style>
